import React, { useEffect,useState } from 'react';
import { Form,
    Input, 
    Select,
    Drawer,
    Button,
    PageHeader,
    Divider,
    Row,
    Col,
    Checkbox,
    Tag,
    Table,
    Space,
   } from 'antd';
  import moment from 'moment';
  import {getDictCode,getDictCodeLabel} from '@/utils/DataDictUtils';
  import { EditOutlined } from '@ant-design/icons';
  import '../index.less';

  const FormItem = Form.Item;
  const {TextArea} =  Input;
  const { Option } = Select;
  const dateFormat = 'YYYY-MM-DD';

const ViewForm = props => {
    const { visible, current, onCancel } = props;
    const [regionData, setRegionData] = useState(null);
    const [friendlyName, setFriendlyName] = useState(null);
    useEffect(()=>{
      
      if(current && visible){
        setRegionData(current.region);
        setFriendlyName(current.friendlyName);
         
      }

    },[visible]);

    return (
        <>
        <Drawer
          title="查看设备"
          width={720}
          onClose={onCancel}
          visible={visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={onCancel} style={{ marginRight: 8 }}>
                关闭
              </Button>
              
            </div>
          }
        >
        
        <div className='page-header-title'>设备基础信息:</div>
          <Form>
            <Row>
              <Col span={8}>
                <FormItem label='设备名称'  >
                    {current && friendlyName? friendlyName:''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备类别'  >
                    {current && current.className}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备型号'  >
                    {current && current.model ? current.model.modelName:''}
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备属性'  >
                    {current && current.model ?current.model.attributes:''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备ID'  >
                    {current && current.deviceId}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备订单号'  >
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备版本'  >
                    {current && current.version}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='添加时间'  >
                    {current && current.region ? moment(current.region.createTime).format(dateFormat):''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='保修时间'  >
                    {current && current.region? Math.ceil((moment().valueOf() - current.region.createTime)/1000/60/60/24):0}天
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备状态'  >
                    {current && current.status?getDictCodeLabel('deviceStatus',current.status):''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='在线状态'  >
                    {current && current.state?getDictCodeLabel('deviceState',current.state):''}
                </FormItem>
              </Col>
          </Row>
          <div className='page-header-title'>设备所在区域:</div>
          <Row>
            <Col>
              <FormItem >
                { regionData ? <Tag style={{marginTop:'5px'}} >
                          {regionData.regionName+'-'+regionData.zoneName}
                        </Tag>:''}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem label='功能划分'  >
                {regionData && regionData.deviceFuncName ?regionData.deviceFuncName:''}
              </FormItem>
            </Col>
          </Row>
          <Row>
          <Col span={24}>
            <Form.Item label='区域描述' >
                <TextArea
                  rows={4}
                  placeholder='请输入区域描述'
                  disabled={true}
                  onChange={(e)=>{
                    setRegionData({
                      ...regionData,
                      regionDesc: e.target.value,
                    });
                  }}
                  value={regionData?regionData.regionDesc:null}
                />
            </Form.Item>
            </Col>
          </Row>
          </Form>
        </Drawer>
        </>
    );
};

export default ViewForm;